import React from 'react'
import './ShopDetails.css'
import img from '../../logo.jpg'
import { Tabs, WhiteSpace } from 'antd-mobile';
import { Modal } from 'antd-mobile';
import axios from 'axios'
import set from '../../uitls/session'
/* 分类 */
let fenlei = []
/* 订单 */
let goodsCount = [
    { id: '', goodsId: '', count: '', oder: [] }
]
let oderData = []
/* 评价 */
let pinjia = []
/* 总价格 */

class ShopDetails extends React.Component {
    constructor() {
        super()
        this.state = {
            display1: true,
            display2: false,
            display3: false,
            changeText: '下单',
            pinjiaText: '全部',
            modal1: false,
            modal2: false,
            yanse: false,
            shopMsg: [],
            TableData: [],//请求的数据
            member: '',
            fenleiArr: [],//分类,
            tabs1: [],
            tabs2: [],
            fenlei: [],
            goods: [],
            allPrice: 0,//总价格

        }
    }
    /* 页面打开，发起请求 */
    componentDidMount() {
        this.xuanran()
        this.firstCellect()
        this.firstJoin()
        this.mypinjia()
    }
    xuanran = () => {
        /* 查询分类和商家信息 */
        this.axios({
            url: 'api2/olife/client/queryShopInfo',
            method: 'post',
            params: { shop_id: this.props.match.params.shopId }
        }).then(data => {
            // console.log(data);
            fenlei = data.data.data.goodsTypeInfoInfo
            this.setState({
                shopMsg: data.data.data.shopInfo,
            })
            /* 将分类名称更改 */
            fenlei.forEach(item => {
                item.title = item.sort_name
            })
            // console.log(fenlei);
            /* 请求所有分类下的商品 */

            this.mygoods(fenlei[0].sort_name)


        })
    }
    /* 发起请求商品 */
    mygoods = (name) => {
        this.axios({
            url: 'api2/olife/client/queryGoodsListByShopIdAndName',
            method: 'post',
            params: {
                shop_id: this.props.match.params.shopId,
                sort_name: name
            }
        }).then(data => {
            // console.log(data);
            this.setState({
                TableData: data.data.data
            })
        })

    }
    /* 页面打开时，查询收藏情况 */
    firstCellect = () => {
        this.axios({
            url: 'api2/olife/client/queryListShopCollect',
            method: 'get',
            params: {
                user_id: '8'
            }
        }).then(data => {
            // console.log(data);
            if (data.data.code === 200) {
                this.setState({
                    yanse: true
                })
            } else if (data.data.code === 501) {
                this.setState({
                    yanse: false
                })
            }

        }).catch(err => {
            console.log(err);
        })
    }
    /* 页面打开时，查询加入会员情况 */
    firstJoin = () => {
        this.axios({
            url: 'api2/olife/client/registerVip',
            method: 'get',
            params: {
                shop_id: this.props.match.params.shopId,
                user_id: '2'
            }
        }).then(data => {
            // console.log(data);
            if (data.data.code === 501) {
                this.setState({
                    member: data.data.msg
                })
            }


        }).catch(err => {
            console.log(err);
        })
    }

    changeTabs = (e) => {
        let status = e.target.innerText

        if (status === '下单') {
            this.setState({
                display1: true,
                display2: false,
                display3: false,
                changeText: status
            })
        } else if (status === '评价') {
            this.setState({
                display1: false,
                display2: true,
                display3: false,
                changeText: status
            })
        } else if (status === '商家详情') {
            this.setState({
                display1: false,
                display2: false,
                display3: true,
                changeText: status

            })
        }
    }

    checkBtn = (e) => {
        // console.log(e);
        let sta = e.target.innerHTML
        this.setState({
            pinjiaText: sta
        })
    }
    showModal = key => (e) => {
        e.preventDefault(); // 修复 Android 上点击穿透
        this.setState({
            [key]: true,
        });
        console.log(key);
        if (key === 'modal2') {
            oderData = goodsCount
            if (oderData[0].id === '') {
                oderData.splice(0, 1)
            }
            console.log(oderData);
        }
    }
    onClose = key => () => {
        this.setState({
            [key]: false,
        });
    }
    /* 收藏 */
    Collection = () => {
        if (this.state.yanse === false) {
            axios({
                url: 'api2/olife/client/collectShop',
                method: 'get',
                params: {
                    shop_id: '1',
                    user_id: '4'
                }
            }).then(data => {
                // console.log(data);
                this.setState({
                    yanse: true
                })
            }).catch(err => {
                console.log(err);
            })

        } else {
            axios({
                url: 'api2/olife/client/unFavorite',
                method: 'get',
                params: {
                    shop_id: '1',
                    user_id: '4'
                }
            }).then(data => {
                // console.log(data);
                this.setState({
                    yanse: false
                })
            }).catch(err => {
                console.log(err);
            })

        }
    }
    /* 加入会员 */
    Join = () => {
        axios({
            url: 'api2/olife/client/registerVip',
            method: 'get',
            params: {
                shop_id: '1',
                user_id: '2'
            }
        }).then(data => {
            console.log(data);
            this.setState({
                member: data.data.msg
            })

        }).catch(err => {
            console.log(err);
        })
    }
    /* 点击分类 */
    ChangeGoods = (e) => {
        // console.log(e);
        this.mygoods(e.sort_name)

    }

    /* 添加数量 */
    addNum(index, myitem) {
        console.log(index);
        console.log(myitem.goods_id);
        for (let i = 0; i < goodsCount.length; i++) {
            console.log(11111);
            if (!(index === goodsCount[i].id && myitem.goods_id === goodsCount[i].goodsId)) {
                console.log(22222);
                if (i === goodsCount.length - 1) {

                    let arr = { id: index, goodsId: myitem.goods_id, count: 1, goodsPrice: myitem.goods_price, oder: [myitem] }
                    goodsCount.push(arr)
                    break
                } else {
                    continue
                }
            } else {
                console.log(3333);
                goodsCount[i].count = goodsCount[i].count + 1

            }
        }
        console.log(goodsCount);
        /* 计算总价格 */
        let myprice = 0
        for (let i = 0; i < goodsCount.length; i++) {

            if (goodsCount[i].id === "") {
                console.log(goodsCount[i]);
            } else {
                myprice = myprice + goodsCount[i].oder[0].goods_price
                this.setState({
                    allPrice: myprice
                })
            }
        }


    }
    /* 结算 */
    jiesuan = (e) => {
        goodsCount.splice(0, 1)
        if (goodsCount.length === 0) {
            e.preventDefault()
        } else {

            set.setStorage('myorder', goodsCount)
            set.setStorage('Price', this.state.allPrice)
            this.props.history.push({ pathname: "/Home/subOrder" });
        }

    }
    /* 评价 */
    mypinjia = () => {
        this.axios({
            url: 'api1//olife/prder/dindan',
            method: 'get',
            params: { shop_id: this.props.match.params.shopId }
        }).then(data => {
            // console.log(data);
            pinjia = data.data.data
        })
    }
    render() {
        console.log(this.props.match.params.shopId);

        return (
            <div className='ShopDetails'>
                <div className='top1'>
                    <span className='iconfont icon-fanhuijian1 span1'></span>
                    <span className='span2'>更多商品，任您挑选~~</span>
                </div>
                <div className='title'>
                    <img src={img} alt="" style={{ width: '60px', height: '60px' }} className='img' />
                    <div className='centent'>
                        <div className='centent-top'>
                            <p className='p1'>{this.state.shopMsg.shop_name}</p>

                            {this.state.member === '' && <p className='p2 p3' onClick={this.Join}>加入会员</p>}
                            {this.state.member && <p className='p2 p3' >已是会员</p>}

                            <p className='p2 p4'><i className='iconfont icon-aixin' onClick={this.Collection} style={{ color: this.state.yanse ? 'red' : 'white' }}></i></p>

                        </div>
                        <div className='centent-bottom'>
                            <span className='iconfont icon-tongzhi1 span1'></span>

                            <span className='span2'>{this.state.shopMsg.shop_bulletin}</span>
                            <span className='iconfont icon-iconfontyoujiantou-zuo span1' onClick={this.showModal('modal1')}></span>
                        </div>
                    </div>
                </div>
                <div className='bottom'>
                    <ul className='ul1'>
                        <li id='li1' onClick={this.changeTabs} style={{ borderBottom: this.state.changeText === '下单' ? '2px solid #FD7E00' : '' }}>下单
                        <div className='li1Div' style={{ display: this.state.display1 ? 'block' : 'none' }}>
                                <WhiteSpace />
                                <Tabs swipeable={true} tabs={fenlei} initialPage={0} animated={false} useOnPan={false} tabBarPosition="left"
                                    tabDirection="vertical" onChange={this.ChangeGoods}>

                                    <div style={{ height: '250px', backgroundColor: '#fff' }}>
                                        {(this.state.TableData || []).map((myitem, index) => {
                                            return (
                                                <div className='rightDiv' key={index}>
                                                    <div >
                                                        <img className='img1' src={img} alt="" style={{ width: '60px', height: '60px' }} />
                                                    </div>
                                                    <div className='mylistDiv'>

                                                        <span style={{ fontSize: '12px' }}>{myitem.goods_name}</span>
                                                        <span className='iconfont icon-jia1' style={{ width: '40%', color: '#FD7E00', textAlign: 'center' }} onClick={this.addNum.bind(this, index, myitem)} ></span>
                                                        <div style={{ display: 'flex' }}>

                                                            <span style={{ width: '50%', fontSize: '12px' }}>￥{myitem.goods_price}/份</span>
                                                            <span style={{ fontSize: '12px' }}>销量：{myitem.goods_num}</span>
                                                        </div>
                                                    </div>
                                                </div>
                                            )
                                        }
                                        )}
                                    </div>


                                </Tabs>
                                <WhiteSpace />
                            </div>
                        </li>
                        <li onClick={this.changeTabs} style={{ borderBottom: this.state.changeText === '评价' ? '2px solid #FD7E00' : '' }}>评价
                        <div className='li2Div' style={{ display: this.state.display2 ? 'block' : 'none' }}>
                                <div className='pinjiaDiv'>
                                    <div><h1 style={{ color: '#FD7E00' }}>4.7</h1></div>
                                    <div>
                                        <p>商家评分</p>
                                        <p style={{ marginTop: '-20px' }}>
                                            <span className="iconfont icon-pingfen1" style={{ color: '#FFAD33' }}></span>
                                            <span className="iconfont icon-pingfen1" style={{ color: '#FFAD33' }}></span>
                                            <span className="iconfont icon-pingfen1" style={{ color: '#FFAD33' }}></span>
                                            <span className="iconfont icon-pingfen1" style={{ color: '#FFAD33' }}></span>
                                            <span className="iconfont icon-pingfen1" style={{ color: '#E6E6E6' }}></span>
                                        </p>
                                    </div>
                                    <div>
                                        <p>口味 <span style={{ fontSize: '16px', fontWeight: 'bold' }}>4.8</span></p>
                                        <p style={{ marginTop: '-20px' }}>包装 <span style={{ fontSize: '16px', fontWeight: 'bold' }}>4.8</span></p>
                                    </div>
                                </div>
                                {/* 评价 */}
                                <div className="but">
                                    <button onClick={this.checkBtn} style={{ backgroundColor: this.state.pinjiaText === '全部' ? '#FD7E00' : '' }}>全部</button>
                                    <button onClick={this.checkBtn} style={{ backgroundColor: this.state.pinjiaText === '好评' ? '#FD7E00' : '' }}>好评</button>
                                    <button onClick={this.checkBtn} style={{ backgroundColor: this.state.pinjiaText === '差评' ? '#FD7E00' : '' }}>差评</button>
                                </div>
                                <div className='zhmbottom'>
                                    <div>
                                        <table className='table1'>
                                            {(pinjia || []).map((item, i) => {
                                                return (
                                                    <tbody key={i}>
                                                        <tr >
                                                            <td rowSpan='2'>
                                                                <img src={img} alt="" style={{ width: '60px', height: '60px' }} />
                                                            </td>
                                                            <td>{item.order_name}</td>
                                                            <td>美团会员</td>
                                                            <td>2020.11.08</td>
                                                        </tr>

                                                        <tr>
                                                            <td>
                                                                <span className="iconfont icon-pingfen1" style={{ color: '#FFAD33' }}></span>
                                                                <span className="iconfont icon-pingfen1" style={{ color: '#FFAD33' }}></span>
                                                                <span className="iconfont icon-pingfen1" style={{ color: '#FFAD33' }}></span>
                                                                <span className="iconfont icon-pingfen1" style={{ color: '#FFAD33' }}></span>

                                                            </td>
                                                            <td>非常满意</td>
                                                        </tr>
                                                        <tr style={{ textAlign: 'center' }}>
                                                            <td >店家服务态度非常好</td>
                                                        </tr>
                                                    </tbody>
                                                )
                                            })}



                                        </table>
                                    </div>
                                </div>
                            </div></li>
                        <li onClick={this.changeTabs} style={{ borderBottom: this.state.changeText === '商家详情' ? '2px solid #FD7E00' : '' }}>商家详情
                        <div className='li3Div' style={{ display: this.state.display3 ? 'block' : 'none', }}>
                                <table className='table2'>
                                    <tbody>
                                        <tr>
                                            <td className='iconfont icon-dizhi' style={{ width: '10%', textAlign: 'center' }}></td>
                                            <td >地址：{this.state.shopMsg.shop_address}</td></tr>
                                        <tr>
                                            <td className='iconfont icon-dianhua1' style={{ width: '10%', textAlign: 'center' }}></td>
                                            <td >邮箱：{this.state.shopMsg.shop_email}</td></tr>
                                        <tr>
                                            <td className='iconfont icon-17' style={{ width: '10%', textAlign: 'center' }}></td>

                                            {this.state.shopMsg.shop_status === 1 && <td >状态：营业中</td>}
                                            {this.state.shopMsg.shop_status === 0 && <td >状态：休息中</td>}
                                        </tr>
                                    </tbody>
                                </table>
                            </div></li>
                    </ul>
                </div>
                {/* 公告弹框 */}
                <Modal
                    visible={this.state.modal1}
                    transparent
                    maskClosable={false}
                    onClose={this.onClose('modal1')}
                    title="公告"
                    footer={[{ text: 'Ok', onPress: () => { this.onClose('modal1')(); } }]}
                    wrapProps={{ onTouchStart: this.onWrapTouchStart }}

                >
                    <div style={{ height: 100, overflow: 'scroll' }}>
                        {this.state.shopMsg.shop_bulletin}
                    </div>
                </Modal>
                {/* 购物车 */}
                <div className='cart'>
                    <div className='div1'>
                        <span className='iconfont icon-gouwuche1 gouwuche' style={{ fontSize: '30px' }} onClick={this.showModal('modal2')}></span>
                                        ￥{this.state.allPrice}</div>
                    <div className='div2' onClick={this.jiesuan}>选好了</div>

                    {/* 购物车弹框 */}
                    <Modal
                        visible={this.state.modal2}
                        transparent
                        maskClosable={false}
                        onClose={this.onClose('modal2')}
                        title="我的购物车"
                        footer={[{ text: 'Ok', onPress: () => { this.onClose('modal2')(); } }]}
                        wrapProps={{ onTouchStart: this.onWrapTouchStart }}

                    >
                        <div style={{ height: 100, overflow: 'scroll' }}>

                            <table className='border3'>
                                {oderData.map((item, i) => {
                                    return (
                                        <tbody key={i}>
                                            <tr>
                                                <td>
                                                    <img src={img} alt="" style={{ width: '50px', height: '50px' }} />
                                                </td>
                                                <td>{item.oder[0].goods_name}</td>
                                                <td>
                                                    <span className='iconfont icon-jian' style={{ width: '10%' }}></span>
                                                    <span className='' style={{ width: '10%', marginLeft: '5px', marginRight: '5px' }}>{item.count}</span>
                                                    <span className='iconfont icon-jia1' style={{ width: '10%', color: '#FD7E00' }}></span>
                                                </td>
                                            </tr>
                                        </tbody>
                                    )

                                })}

                            </table>
                        </div>
                    </Modal>
                </div>
            </div>
        )
    }
}

export default ShopDetails